<template>
  <div class="footer-wrap" v-show="showFooter">
    <div class="footer">
      <div class="footer-title">{{ footer }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      footer: ""
    }
  },
  created() {
    this.footer = this.$store.state.webInfo.footer;
  }
}
</script>

<style scoped>
.footer-wrap {
  user-select: none;
  animation: hideToShow 2s;
}

.footer {
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--gradientBG);
  text-align: center;
  color: var(--white);
  background-size: 300% 300%;
  animation: gradientBG 10s ease infinite;
}

.footer-title {
  padding-top: 10px;
  font-size: 16px;
}
</style>
